 
<template>
  <el-container>

    <el-header style="text-align: center; font-size: 30px">吉玛基因 FISH试剂盒&其他订购单</el-header>

    <el-main>
    
    <el-form class="small-space" :model="tempOrder" ref="dynamicValidateFISH" :rules="rules" v-loading.body="listLoading" label-order="left" label-width="150px">
      <el-row class="infor_bg">
        <el-col :span="12">
          <el-form-item label="订购日期" prop="tempTime" :editable="false" readonly="true" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">

            <el-date-picker v-model="tempOrder.tempTime" type="datetime" :readonly = "enabletempTime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions" style='width:450px;'>
            </el-date-picker>
            
          </el-form-item>
          <el-form-item label="客户姓名" prop="client_name" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.client_name" style='width:450px;' :readonly = "enableClientName"></el-input>
          </el-form-item>
          <el-form-item label="导师/管家姓名" prop="manager_name" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.manager_name" style='width:450px;' :readonly = "enableManaName"></el-input>
          </el-form-item>
          <el-form-item label="客户单位" prop="client_affiliation" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.client_affiliation" style='width:450px;' :readonly = "enableClientAffil"></el-input>
          </el-form-item>
          <el-form-item label="送货地址" prop="shipping_address" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="务必详细准确，如**市**区****路****号***室" :readonly = "enableShippingAddress" v-model="tempOrder.shipping_address" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="邮编" prop="postal_code" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" maxlength="6" v-model="tempOrder.postal_code" style='width:450px;' :readonly = "enablePostal"></el-input>
          </el-form-item>
          <el-form-item label="发票抬头" prop="invoice_title" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="预付款客户不用填写发票抬头，但在此注明导师姓名" :readonly = "enableInvoiceTitle" v-model="tempOrder.invoice_title" style='width:450px;'></el-input>
          </el-form-item>
           <el-form-item label="开票形式" prop="form_of_invoice" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="请确定发票抬头，发票丢失不能重开，次月不能退换，一个月内付款" :readonly = "enableFormInvoice" v-model="tempOrder.form_of_invoice" style='width:450px;'></el-input>
          </el-form-item>
          <el-form-item label="固定电话/导师电话" prop="telephone" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.telephone" style='width:450px;' :readonly = "enableTelephone"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="client_phone" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.client_phone" style='width:450px;' :readonly = "enableClientPhone"></el-input>
          </el-form-item>

          </el-col>

          <el-col :span="12">
          
          <el-form-item label="电子邮箱" prop="client_email" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" v-model="tempOrder.client_email" style='width:400px;' :readonly = "enableEmail"></el-input>
          </el-form-item>
          <el-form-item label="销售经理" prop="sales_manager_name" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-autocomplete class="inline-input" placeholder="请搜索并选择" :disabled = "enableSalesManaName" v-model="tempOrder.sales_manager_name" :fetch-suggestions="querySearch" @select="handleSelect" style='width:400px;'></el-autocomplete>
          </el-form-item>
          <el-form-item label="订单金额" prop="order_price" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" v-model="tempOrder.order_price" style='width:400px;' :readonly = "enableOrderPrice"></el-input>
          </el-form-item>
          <el-form-item label="快递公司" prop="courier_scervices_company" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-input type="text" v-model="tempOrder.courier_scervices_company" style='width:400px;' :readonly = "enableCourier"></el-input>
          </el-form-item>

          <el-form-item label="预付款客户姓名" prop="advance_customer_name" v-if="dialogStatus=='create' | dialogStatus=='update'">
            <el-checkbox @change="isClientName"></el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-input type="text" v-model="tempOrder.advance_customer_name" style='width:355px;' :disabled="enableAdvanCliName" :readonly = "enableAdvanClientName"></el-input>
          </el-form-item>

          <el-form-item label="发货通知方式" prop="notification_of_delivery" v-if="dialogStatus=='create' | dialogStatus=='update'" :required="true">
            <el-input type="text" placeholder="见下方" v-model="tempOrder.notification_of_delivery" style='width:400px;' :readonly = "enableNotiDeli"></el-input>
          </el-form-item>

          <div class="infor">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1）上海、南京、浙江、安徽、云南、山东、福建、重庆、四川、贵州、西藏、陕西、甘肃、宁夏、新疆、青海、河南、山西、香港、澳门、台湾以及其他境外订货地区请联系上海公司
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：021-51320195，021-51370738，021-51370739，4006900195
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E-mail：order@genepharma.com (产品订购)
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;support@genepharma.com (技术支持)
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2）北京、河北、内蒙古、天津、武汉、江西、黑龙江、吉林、辽宁、湖北、湖南、广东、江苏（除南京）、广西、海南订货地区请联系苏州公司
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：0512-86668828
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E-mail：szorder@genepharma.com (产品订购)
          <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;szsupport@genepharma.com (技术支持)					
          </div>

        </el-col>
        </el-row>
        <br>

        
        <el-table :data="tempOrder.tableDatas" style="width: 100%" max-height="400" height="400" stripe border @selection-change="handleSelectionChange">

          <el-table-column type="selection" width="55" align="center"></el-table-column>

          <el-table-column prop="catalog_id" label="目录号" width="100" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.catalog_id'">
                  <el-input type="text"  v-model="scope.row.catalog_id" :readonly = "enableCatalogId"></el-input>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="sample_type" label="样品类型" width="200" align="center">
            <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.sample_type'">
                
                <el-select v-model="scope.row.sample_type" placeholder="请选择" :disabled = "enableSampleType">
                  <el-option v-for="item in samples" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                </div>
            </template>
          </el-table-column>

          <el-table-column prop="product_name" label="产品名称" width="200" align="center">
            <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.product_name'">
                  <el-input type="text"  v-model="scope.row.product_name" :readonly = "enableProName"></el-input>
                </div>
            </template>
          </el-table-column>

          <el-table-column prop="gene_name_type" label="基因名称及物种" width="150" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.gene_name_type'">
                  <el-input type="text"  v-model="scope.row.gene_name_type" :readonly = "enableGeneNameType"></el-input>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="probe_sequence_53" label="探针序列（5’-3’）" width="200" align="center">
            <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.probe_sequence_53'">
                  <el-input type="text"  v-model="scope.row.probe_sequence_53" :readonly = "enableProbeSeq53"></el-input>
                </div>
            </template>
          </el-table-column>

          <el-table-column label="规格" align="center">
            <el-table-column prop="numbers" label="数量" width="200" align="center">
              <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.numbers'">
                  <el-input type="text"  v-model="scope.row.numbers" :readonly = "enableNumbers"></el-input>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="company" label="单位" width="200" align="center">
              <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.company'">
                  <el-input type="text"  v-model="scope.row.company" :readonly = "enableCompany"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="修饰方式" align="center">
            <el-table-column prop="modifi_5" label="5'" width="200" align="center">
              <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.modifi_5'">
                  <el-select v-model="scope.row.modifi_5" placeholder="请选择" :disabled = "enableModi5">
                    <el-option v-for="item in modifi_5s" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="modifi_3" label="3'" width="200" align="center">
              <template slot-scope="scope">
                <div
                  :prop="'tableDatas.' + scope.$index + '.modifi_3'">
                  <el-select v-model="scope.row.modifi_3" placeholder="请选择" :disabled = "enableModi3">
                    <el-option v-for="item in modifi_3s" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="purification_method" label="纯化方式" width="150" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.purification_method'">
                  <el-select v-model="scope.row.purification_method" placeholder="请选择" :disabled = "enablePuriMeth">
                    <el-option v-for="item in purifs" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
            </template>
          </el-table-column>

          <el-table-column prop="special_instructions" label="特殊说明" width="150" align="center">
            <template slot-scope="scope">
              <div
                  :prop="'tableDatas.' + scope.$index + '.special_instructions'">
                  <el-input type="text"  v-model="scope.row.special_instructions" :readonly = "enableSpecIns"></el-input>
                </div>
            </template>
          </el-table-column>

        </el-table>

        <div align="center">
            <el-button size="small" type="primary" @click="addRecord" :disabled = "enableAdd"> 添加行 </el-button>
            <el-button size="small" type="primary" @click.prevent="deleteRecord" :disabled = "enableDelete"> 删除行 </el-button>
        </div>
        <br>

        <el-row :gutter="20">
          <el-col :span="2">
              <div style="font-size:20px; height:50px; text-align:center; line-height:70px;">备注</div>
          </el-col>
          <el-col :span="22">
            <el-input type="textarea" :rows="3" v-model="tempOrder.remark" :readonly = "enableRemark" v-if="dialogStatus=='create' | dialogStatus=='update'"></el-input>
          </el-col>
        </el-row>
        <br>
        <el-row :gutter="20">
          <el-col :span="2">
              <div style="font-size:20px; height:170px; text-align:center; line-height:150px;">其他</div>
          </el-col>
          <el-col :span="22">
              <div style="border:dashed 1px black; font-size:15px; padding-left:10px;">
                <div>1.下单前请务必核对订购表客户信息和订购内容无误，我们将按照订购表上的内容生产、邮寄货物，开具发票！发送订单前请仔细核对，订单接收24小时后不能再修改或取消。</div>
                <div>2.订单发送后1个工作日内没有收到回复，请电话联系确认。请勿多次多头下单。若由此造成下单重复的，客户需自行承担责任，支付费用。需要报账用合同，或送货单、发票等特殊要求，请在下单时说明。否则您需承担因此产生的费用！</div>
                <div>3.<span class="mark_1">请先选择样品类型，再选择产品名称。</span>合成的探针类型默认为特殊修饰的DNA寡核苷酸单链探针（如需合成RNA探针请在特殊说明中备注）。</div>
                <div>4.效果保证指在新鲜细胞爬片，FISH验证效果通过认为产品合格；如果无效，提供原始数据和步骤，公司确认后，可以退款或免费重新合成一次（款到）。</div>
              </div>
          </el-col>
        </el-row>

        <div align="center">
          <el-button v-if="dialogStatus=='create' & buttonStatus == 'create'" type="success" @click="create_FISH" :disabled = "enableCreate">添 加</el-button>
          <el-button v-if="dialogStatus=='update' & buttonStatus == 'update'" type="primary" @click="update_FISH" :disabled = "enableUpdate">修 改</el-button>
          <el-button v-if="buttonStatus == 'print'" type="primary" >打 印</el-button>
          <el-button v-if="dialogStatus=='create' & buttonStatus == 'create'" @click="resetForm('dynamicValidateFISH')">重 置</el-button>
        </div>

    </el-form>
    
  </el-main>
  </el-container>
</template>


<script>
import {mapGetters} from 'vuex'
import {validator} from 'vee-validate'
import {isPhone, isClientName, isManagerName, isClientAff, isShippingAdd, isClientEMail, isInvoiceTitle,
 isFormInvoice, isTelephone, isSalesManager, isOrderPrice, isAdvanceCusName, isNotificationDeli, isPostalCode, isScervices_Company} from '../../validate'
export default {
  data() {

      // var check_client_name = (rule, value, callback) => {
      //     if (value === '') {
      //       callback(new Error('请输入客户姓名'));
      //     } else if(Number.isInteger(value)){
      //       callback(new Error('含有非法字符（只能输入字母、汉字）'))
      //     } else {
      //       callback();
      //     }
      // };

      return {
        dialogStatus: 'create',
        buttonStatus: 'create',
        listLoading: false,     //数据加载等待动画
        enableAdvanCliName:true,

        enableCreate:false,
        enableUpdate:false,
        enableAdd:false,
        enableDelete:true,

        samples: [{
          value: '选项1',
          label: "细胞爬片"
        }, {
          value: '选项2',
          label: "石蜡切片"
        }, {
          value: '选项3',
          label: "冰冻切片"
        }, {
          value: '选项4',
          label: "FISH探针"
        }, {
          value: '选项5',
          label: "其他"
        }],

        modifi_5s: [{
          value: '选项1',
          label: "5'FAM"
        }, {
          value: '选项2',
          label: "5'CY3"
        }],

        modifi_3s: [{
          value: '选项1',
          label: "3'FAM"
        }, {
          value: '选项2',
          label: "3'CY3"
        }],

        purifs: [{
          value: '选项1',
          label: "PAGE"
        }, {
          value: '选项2',
          label: "HPLC"
        }],

        multipleSelection:[],
        salesList:[],

        enabletempTime : false,
        enableClientName: false,
        enableManaName:false,
        enableClientAffil:false,
        enableShippingAddress:false,
        enablePostal:false,
        enableInvoiceTitle:false,
        enableFormInvoice:false,
        enableTelephone:false,
        enableClientPhone:false,
        enableEmail:false,
        enableSalesManaName:false,
        enableOrderPrice:false,
        enableCourier:false,
        enableAdvanClientName:false,
        enableNotiDeli:false,

        enableCatalogId:false,
        enableSampleType:false,
        enableProName:false,
        enableGeneNameType:false,
        enableProbeSeq53:false,
        enableNumbers:false,
        enableCompany:false,
        enableModi5:false,
        enableModi3:false,
        enablePuriMeth:false,
        enableSpecIns:false,
        enableRemark : false,
        

        tempOrder:{
          id: "",
          order_id: "",
          mord_id: "",
          tempTime:'',
          create_time: "",
          client_name: "",
          manager_name: "",
          client_affiliation: "",
          shipping_address: "",
          postal_code:"",
          invoice_title: "",
          form_of_invoice: "",
          telephone: "",
          client_phone: "",
          client_email: "",
          notification_of_delivery: "",
          order_price:"",
          order_type:"FISH试剂盒&其它",
          sales_manager_name:"",
          sales_manager_id:"",
          advance_customer_name:"",
          courier_scervices_company:"",
          remark:"",

          tableDatas: [{
          catalog_id:"",
          sample_type:"",
          product_name:"",
          gene_name_type:"",
          probe_sequence_53:"",
          numbers:"",
          company:"",
          modifi_5:"",
          modifi_3:"",
          purification_method:"",
          special_instructions:""
        }]

        },

        rules:{
          tempTime:[
            {type: 'date', required: true, message: '请输入订购日期', trigger: 'blur'}
          ],
          client_name:[
            {validator: isClientName, trigger: 'blur' }
          ],
          manager_name:[
            {validator: isManagerName, trigger: 'blur' }
          ],
          client_affiliation:[
            {validator: isClientAff, trigger: 'blur' }
          ],
          shipping_address:[
            {validator: isShippingAdd, trigger: 'blur' }
          ],
          postal_code:[
            { validator: isPostalCode, required: false, trigger: 'change' }
          ],
          invoice_title:[
            {validator: isInvoiceTitle, trigger: 'blur' }
          ],
          form_of_invoice:[
            {validator: isFormInvoice, trigger: 'blur' }
          ],
          telephone:[
            {validator: isTelephone, trigger: 'blur' }
          ],
          client_phone:[
            {validator: isPhone, trigger: 'blur' }
          ],
          client_email:[
            {validator: isClientEMail, trigger: 'blur' }
          ],
          sales_manager_name:[
            {validator: isSalesManager, required: false, trigger: 'change' }
          ],
          order_price:[
            {validator: isOrderPrice, required: false, trigger: 'change' }
          ],
          advance_customer_name:[
            {validator: isAdvanceCusName, required: false, trigger: 'change' }
          ],
          notification_of_delivery:[
            {validator: isNotificationDeli, trigger: 'blur' }
          ],
          courier_scervices_company:[
            {validator: isScervices_Company, required: false, trigger: 'blur' }
          ]
        },

        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

      }
  },

  created() {
    if (this.hasPerm('order:add') || this.hasPerm('order:update')) {
      this.getAllSalesManager();
    }
    if (this.hasPerm('order:list')) {
      this.getOrderListById();
    }
  },

  computed: {
      ...mapGetters([
        'order_id'
      ]),
      
    },
    watch: {
      "order_id" : function(){
        this.getOrderListById();
    }
  },

  methods: {

    getOrderListById(){
      this.tempOrder.order_id = this.order_id;

      this.api({
          url: "/order/getFISHKitByID",
          method: "get",
          params: this.tempOrder.order_id
      }).then(data => {
          this.tempOrder.order_id = data.order_id;
          this.tempOrder.client_name = data.client_name;
          this.tempOrder.tempTime = data.create_time;
          this.tempOrder.manager_name = data.manager_name;
          this.tempOrder.client_affiliation = data.client_affiliation;
          this.tempOrder.shipping_address = data.shipping_address;
          this.tempOrder.invoice_title = data.invoice_title;
          this.tempOrder.form_of_invoice = data.form_of_invoice;
          this.tempOrder.telephone = data.telephone;
          this.tempOrder.client_phone = data.client_phone;
          this.tempOrder.client_email = data.client_email;
          this.tempOrder.notification_of_delivery = data.notification_of_delivery;

          this.tempOrder.postal_code = data.postal_code;
          this.tempOrder.sales_manager_name = data.username;
          this.tempOrder.sales_manager_id = data.sales_manager_id;
          this.tempOrder.order_price = data.order_price;
          this.tempOrder.courier_scervices_company = data.courier_scervices_company;
          this.tempOrder.advance_customer_name = data.advance_customer_name;
          this.tempOrder.remark = data.remark;

          this.tempOrder.tableDatas[0].catalog_id = data.catalog_id;
          this.tempOrder.tableDatas[0].sample_type = data.sample_type;
          this.tempOrder.tableDatas[0].product_name = data.product_name;
          this.tempOrder.tableDatas[0].gene_name_type = data.gene_name_type;
          this.tempOrder.tableDatas[0].probe_sequence_53 = data.probe_sequence_53;
          this.tempOrder.tableDatas[0].numbers = data.numbers;
          this.tempOrder.tableDatas[0].company = data.company;
          this.tempOrder.tableDatas[0].modifi_5 = data.modifi_5;
          this.tempOrder.tableDatas[0].modifi_3 = data.modifi_3;
          this.tempOrder.tableDatas[0].purification_method = data.purification_method;
          this.tempOrder.tableDatas[0].special_instructions = data.special_instructions;

          this.enabletempTime = true;
          this.enableClientName = true;
          this.enableManaName = true;
          this.enableClientAffil = true;
          this.enableShippingAddress = true;
          this.enablePostal = true;
          this.enableInvoiceTitle = true;
          this.enableFormInvoice = true;
          this.enableTelephone = true;
          this.enableClientPhone = true;
          this.enableEmail = true;
          this.enableSalesManaName = true;
          this.enableOrderPrice = true;
          this.enableCourier = true;
          this.enableAdvanClientName = true;
          this.enableNotiDeli = true;

          this.enableCatalogId = true;
          this.enableSampleType = true;
          this.enableProName = true;
          this.enableGeneNameType = true;
          this.enableProbeSeq53 = true;
          this.enableNumbers = true;
          this.enableCompany = true;
          this.enableModi5 = true;
          this.enableModi3 = true;
          this.enablePuriMeth = true;
          this.enableSpecIns = true;
          this.enableRemark = true;

          this.enableAdd = true;
          this.enableDelete = true;
          this.buttonStatus = 'print';
      })
    },

    //获取所有的销售经理
    getAllSalesManager(){
        this.api({
          url: "/order/listSales",
          method: "get"
        }).then(data => {
          this.salesList = data.list;

          var json = JSON.parse(JSON.stringify(data.list).replace(/username/g,"value"));
          this.salesList = json;
        })
    },

    querySearch(queryString, cb) {
        var salesList = this.salesList;
        var results = queryString ? salesList.filter(this.createFilter(queryString)) : salesList;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (salesList) => {
          return (salesList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },

      handleSelect(item) {
        this.tempOrder.sales_manager_name = item.value;
        this.tempOrder.sales_manager_id = item.id;
      },

    //判断是否选中预付款客户姓名
    isClientName(){
      if(this.enableAdvanCliName){
        this.enableAdvanCliName = false;
      }else{
        this.enableAdvanCliName = true;
      }
    },

    //添加表格记录
    addRecord(){
      var newValue = {
          catalog_id:"",
          sample_type:"",
          product_name:"",
          gene_name_type:"",
          probe_sequence_53:"",
          numbers:"",
          company:"",
          modifi_5:"",
          modifi_3:"",
          purification_method:"",
          special_instructions:""
      };
      this.tempOrder.tableDatas.push(newValue);
    },

    handleSelectionChange(val){
      this.multipleSelection = val;
      if(this.multipleSelection.length != 0){
        this.enableDelete = false
      }else{
        this.enableDelete = true
      }
    },

    deleteRecord(){
      for(let i = 0; i < this.multipleSelection.length; i++){
        var index = this.tempOrder.tableDatas.indexOf(this.multipleSelection[i])
        if (index !== -1) {
          this.tempOrder.tableDatas.splice(index, 1)
        }
      }
      this.enableDelete = true
    },

    resetForm(formName){
      this.$refs[formName].resetFields();

      var lengths = this.tempOrder.tableDatas.length;

      if(lengths != 0){
        for (let i = 0; i < lengths; i++) {
          this.tempOrder.tableDatas[i].catalog_id = "";
          this.tempOrder.tableDatas[i].sample_type = "";
          this.tempOrder.tableDatas[i].product_name = "";
          this.tempOrder.tableDatas[i].gene_name_type = "";
          this.tempOrder.tableDatas[i].probe_sequence_53 = "";
          this.tempOrder.tableDatas[i].numbers = "";
          this.tempOrder.tableDatas[i].company = "";
          this.tempOrder.tableDatas[i].modifi_5 = "";
          this.tempOrder.tableDatas[i].modifi_3 = "";
          this.tempOrder.tableDatas[i].purification_method = "";
          this.tempOrder.tableDatas[i].special_instructions = "";
        } 
      }
      this.tempOrder.remark = "";
    },

    pickerCalendarTime2DbTime(time){
        var d = new Date(time);
        var times=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
        return times;
    },

    create_FISH(){

      var lengths = this.tempOrder.tableDatas.length;

      if(lengths != 0){
        for (let i = 0; i < lengths; i++) {
          let obj1 = {}
          let obj2 = {}
          let obj3 = {}
          let obj4 = {}
          obj1 = this.samples.find((item) => {
          return item.value === this.tempOrder.tableDatas[i].sample_type;
          });
          obj2 = this.modifi_5s.find((item) => {
            return item.value === this.tempOrder.tableDatas[i].modifi_5;
          });
          obj3 = this.modifi_3s.find((item) => {
            return item.value === this.tempOrder.tableDatas[i].modifi_3;
          });
          obj4 = this.purifs.find((item) => {
            return item.value === this.tempOrder.tableDatas[i].purification_method;
          });

          if(obj4 != null){
            this.tempOrder.tableDatas[i].purification_method = obj4.label
          }
          if(obj2 != null){
            this.tempOrder.tableDatas[i].modifi_5 = obj2.label
          }
          if(obj3 != null){
            this.tempOrder.tableDatas[i].modifi_3 = obj3.label
          }
          if(obj1 != null){
            this.tempOrder.tableDatas[i].sample_type = obj1.label
          }
        }
        this.tempOrder.create_time = this.pickerCalendarTime2DbTime(this.tempOrder.tempTime);
      }

      this.$refs.dynamicValidateFISH.validate((valid) => {
        if (valid) {
            this.api({
              url: "/order/addFISH",
              method: "post",
              data: this.tempOrder
            }).then(() => {
              alert("添加FISH试剂盒&其他订购单完成！")
              this.dialogFormVisible = false
              this.resetForm('dynamicValidateFISH')
            })
        } else {
          alert("请输入完整的信息！");
        }
      });
    },

    update_FISH(){
      alert("update_oligo")
    }

  },
}
</script>

<style>
  .infor_bg{
    background-color: #F2F6FC;
  }
  .infor{
    border:1px dashed;
    width:500px;
    margin-left:50px;
    padding:0px 5px 0px 5px;   
  }
  .mark_1{
    color:red;
  }
</style>